<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>solve-list-f</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/bui.css">
		<script type="text/javascript" src="../script/api.js"></script>
		<script type="text/javascript" src="../script/zepto.js"></script>
		<script type="text/javascript" src="../script/doT.min.js"></script>
		<script type="text/javascript" src="../script/bui.js"></script>
		<style type="text/css">
			.solve-list{
				width:100%;
				height:100%;
			}
			.solve-list h3{
				font-weight: bold;
				font-size: .36rem;
			}
			.bui-list label{
				text-align-last: justify;
		    -moz-text-align-last: justify ;  //兼容firefox
		    text-align: justify;
		    text-justify: distribute-all-lines;  //兼容ie
		    display: block; //ie下需设为block
				width: 1.8rem;
			}
			.line{
				/*width: 100%;
				height: 2px;
				background: #eee;*/
			}
			.bui-list>[class*=bui-btn].noLine{
				border-bottom: none;
			}
			input.bui-tag, input.bui-check{
				width: 1.8rem;
				border-radius: .4rem;
				border: 1px solid #259AF3;
				min-height: .5rem;
				line-height: .5rem;
				color: #000;
			}
			input.bui-tag:checked, input.bui-check:checked{
				background: rgba(37,154,243,1);
    		border: 1px solid #259AF3;
				color: #fff;
			}
			input.bui-tag.bad, input.bui-check.bad{
				border: 1px solid #F16F0A;
			}
			input.bui-tag.bad:checked, input.bui-check.bad:checked{
				background: #F16F0A;
    		border: 1px solid #F16F0A;
			}
			.bui-btn.bui-box textarea{
				padding: .2rem;
			}
		</style>
	</head>
<body style="background-color:#fff;">
	<div class="bui-page page-form">
  <main class="solve-list">

		<ul class="bui-list" id="content"></ul>
		<script id="tpl" type="text/x-dot-template">
			<li class="bui-btn bui-box clearactive">
				<label class="bui-label" style="width:1.2rem">工单号:</label>
				<div class="span1">{{=it.baseInfo.orderNo}}</div>
				<label class="bui-label" style="width:1.4rem">工单日期:</label>
				<div class="span1">{{=timestampToTime(it.baseInfo.createDate)}}</div>
			</li>
			<div class="line"></div>
			<h3 class="section-title">企业信息</h3>
			<li class="bui-btn bui-box clearactive">
				<label class="bui-label" for="phonenumber">责任单位</label>：
				<div class="span1">
						{{=it.baseInfo.dutyEnterprise}}
				</div>
			</li>
			<li class="bui-btn bui-box clearactive">
				<label class="bui-label" for="password">责任人</label>：
				<div class="span1">
						{{=it.baseInfo.dutyPerson}}
				</div>
			</li>
			<li class="bui-btn bui-box clearactive">
				<label class="bui-label">联系电话</label>：
				<div class="span1">
					{{=it.baseInfo.dutyPersonMobile}}
				</div>
			</li>
			<li class="bui-btn bui-box clearactive">
				<label class="bui-label">企业地址</label>：
				<div class="span1">
					{{=it.baseInfo.enterpriseAddress}}
				</div>
			</li>
			{{ if(it.beyondRecords && it.beyondRecords.length){ }}
				<div class="line"></div>
				<h3 class="section-title">督办原因</h3>
				<li class="bui-btn bui-box clearactive">
					<span class="word-red">{{=it.baseInfo.reason}}</span>
				</li>
				{{ var beyondRecords = it.beyondRecords; }}
				{{for(var p in beyondRecords){ }}
					<li class="bui-btn bui-box clearactive">
						<div class="span1">{{=timestampToTime(beyondRecords[p].timeStamp)}}</div>
						<div class="span1">
							烟雾指数:<span class="word-red">{{=beyondRecords[p].lampblack}}</span>mg/m³
						</div>
					</li>
				{{ } }}
			{{ } }}
		</script>

		<div class="line"></div>
    <h3 class="section-title">设备检查</h3>
    <ul class="bui-list">
      <li class="bui-btn bui-box noLine">
				<div class="bui-box-align-center" style="width:100%;text-align:center">
					监视仪
				</div>
      </li>
      <li class="bui-btn bui-box clearactive">
        <label class="bui-label">监视仪运行</label>：
				<div class="span1"></div>
				<div class="span4">
	        <input type="radio" class="bui-check" name="monitorStatus" value="1" uncheck="正常" check="正常">
				</div>
	      <div class="span4">
	        <input type="radio" class="bui-check bad" name="monitorStatus" value="2" uncheck="异常" check="异常">
				</div>
      </li>
			<li class="bui-btn bui-box clearactive">
        <label class="bui-label">探头运行</label>：
				<div class="span1"></div>
				<div class="span4">
	        <input type="radio" class="bui-check" name="probeStatus" value="1" uncheck="正常" check="正常">
				</div>
	      <div class="span4">
	        <input type="radio" class="bui-check bad" name="probeStatus" value="2" uncheck="故障" check="故障">
				</div>
      </li>
			<li class="bui-btn bui-box clearactive">
        <label class="bui-label">探头渗油</label>：
				<div class="span1"></div>
				<div class="span4">
	        <input type="radio" class="bui-check" name="probeOilLeakage" value="2" uncheck="未渗油" check="未渗油">
				</div>
	      <div class="span4">
	        <input type="radio" class="bui-check bad" name="probeOilLeakage" value="1" uncheck="渗油" check="渗油">
				</div>
      </li>
			<li class="bui-btn bui-box clearactive">
        <label class="bui-label">网络情况</label>：
				<div class="span1"></div>
				<div class="span4">
	        <input type="radio" class="bui-check" name="netStatus" value="1" uncheck="已连接" check="已连接">
				</div>
	      <div class="span4">
	        <input type="radio" class="bui-check bad" name="netStatus" value="2" uncheck="未连接" check="未连接">
				</div>
      </li>
			<li class="bui-btn bui-box clearactive">
        <label class="bui-label">备注</label>：
				<div class="span1">
					<textarea style="border: 1px solid #eee;" class="bui-input" id="deviceRemark" cols="30" rows="4" placeholder=""></textarea>
				</div>
      </li>
			<div class="line"></div>
			<li class="bui-btn bui-box noLine">
				<div class="bui-box-align-center" style="width:100%;text-align:center">
					净化器
				</div>
      </li>
			<li class="bui-btn bui-box clearactive">
        <label class="bui-label">运行情况</label>：
				<div class="span1"></div>
				<div class="span4">
	        <input type="radio" class="bui-check" name="purifierStatus" value="1" uncheck="正常" check="正常">
				</div>
	      <div class="span4">
	        <input type="radio" class="bui-check bad" name="purifierStatus" value="2" uncheck="异常" check="异常">
				</div>
      </li>
			<li class="bui-btn bui-box clearactive">
        <label class="bui-label">设备故障</label>：
				<div class="span1"></div>
				<div class="span4">
	        <input type="radio" class="bui-check" name="purifierFault" value="1" uncheck="无故障" check="无故障">
				</div>
	      <div class="span4">
	        <input type="radio" class="bui-check bad" name="purifierFault" value="2" uncheck="故障" check="故障">
				</div>
      </li>
			<li class="bui-btn bui-box clearactive">
        <label class="bui-label">备注</label>：
				<div class="span1">
					<textarea style="border: 1px solid #eee;" class="bui-input" id="purifierRemark" cols="30" rows="4" placeholder=""></textarea>
				</div>
      </li>
			<div class="line"></div>
			<li class="bui-btn bui-box noLine">
				<div class="bui-box-align-center" style="width:100%;text-align:center">
					风机
				</div>
      </li>
			<li class="bui-btn bui-box clearactive">
        <label class="bui-label">运行情况</label>：
				<div class="span1"></div>
				<div class="span4">
	        <input type="radio" class="bui-check" name="fanStatus" value="1" uncheck="正常" check="正常">
				</div>
	      <div class="span4">
	        <input type="radio" class="bui-check bad" name="fanStatus" value="2" uncheck="异常" check="异常">
				</div>
      </li>
			<li class="bui-btn bui-box clearactive">
        <label class="bui-label">接口渗油</label>：
				<div class="span1"></div>
				<div class="span4">
	        <input type="radio" class="bui-check" name="intfOilLeakage" value="2" uncheck="未渗油" check="未渗油">
				</div>
	      <div class="span4">
	        <input type="radio" class="bui-check bad" name="intfOilLeakage" value="1" uncheck="渗油" check="渗油">
				</div>
      </li>
			<h3 class="section-title">处理结果</h3>
      <div class="bui-fluid-space-3" style="padding-bottom:.2rem;">
				<div class="span1">
					<input type="radio" class="bui-check bad" name="handleResult" value="1" uncheck="设备损坏" check="设备损坏">
				</div>
				<div class="span1">
					<input type="radio" class="bui-check bad" name="handleResult" value="2" uncheck="设备维修" check="设备维修">
				</div>
				<div class="span1">
					<input type="radio" class="bui-check bad" name="handleResult" value="3" uncheck="设备未供电" check="设备未供电">
				</div>
      </div>
		<div class="line"></div>
    <h3 class="section-title">巡检照片</h3>
		<li class="bui-btn bui-box clearactive">
			<label class="bui-label">添加照片</label>：
			<div class="span1"></div>
		</li>
		</ul>
		<div id="buiPhoto" class="bui-upload bui-fluid-space-4">
        <div class="span1">
            <div id="btnUpload" class="bui-btn">
                <i class="icon-plus large"></i>
            </div>
        </div>
    </div>
    <div class="container-y">
      <div class="bui-box-space">
        <div class="span1">
          <div class="bui-btn round primary"  onclick="submit()" tapmode>提交</div>
        </div>
      </div>
    </div>
  </main>
</div>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">

var data = {}, orderId = '', picList = [];

apiready = function(){

	var id = orderId = api.pageParam.id;

	getData(id);

	// 拍照上传
  var $facePhoto = $("#buiPhoto");
  var $uploadBtn = $("#btnUpload").parent();

  var uiUpload = bui.upload({
      showProgress: false
  });
	// 上拉菜单 js 初始化:
   var uiActionsheet = bui.actionsheet({
       trigger: "#btnUpload",
       buttons: [{ name: "拍照上传", value: "camera" }, { name: "从相册选取", value: "photo" }],
       callback: function(e) {
           var ui = this;
           var val = $(e.target).attr("value");
           switch (val) {
               case "camera":
                   ui.hide();
                   uiUpload.add({
                       "from": "camera",
                       "needCompress": true, // 1.5.3新增压缩
                       "width": 300,
                       "destinationType": "file", //  file | blob | data
                       "onSuccess": function(val, data) {
                           // 展示base64本地图片 建议直接调用start方法上传以后再展示远程地址,避免应用崩溃
                           this.toBase64({
                               onSuccess: function(url) {
                                   $uploadBtn.before(templatePhoto(url))
                               }
                           });
                           // 直接调用start上传图片
                           this.start({
                               header: {},
                               url: common_url + "/lbk/api/file/upload",
                               onSuccess: function(data) {
																 if(data.code == 200){
																		picList.push(data.result[0]);
																 }else{
																	 api.toast({
														 						msg: data.message,
														 						location: 'middle'
														 				});
														 				return false;
																 }
                                   // 成功
                               },
                               onFail: function(data) {
                                   console.log(JSON.stringify(data), "fail");
                                   // 失败
                               },
                           })
                       }
                   })
                   break;
               case "photo":
                   ui.hide();
                   uiUpload.add({
                       "from": "",
                       "onSuccess": function(val, data) {
                           // 展示base64本地图片 建议直接调用start方法上传以后再展示远程地址,避免应用崩溃
                           this.toBase64({
                               onSuccess: function(url) {
                                   $uploadBtn.before(templatePhoto(url))
                               }
                           });
													 // 直接调用start上传图片
                           this.start({
                               header: {},
                               url: common_url + "/lbk/api/file/upload",
                               onSuccess: function(data) {
																 if(data.code == 200){
																		picList.push(data.result[0]);
																 }else{
																	 api.toast({
														 						msg: data.message,
														 						location: 'middle'
														 				});
														 				return false;
																 }
                                   // 成功
                               },
                               onFail: function(data) {
                                   console.log(JSON.stringify(data), "fail");
                                   // 失败
                               },
                           })
                       }
                   })
                   break;
               case "cancel":
                   ui.hide();
                   break;
           }
       }
   })

   function templatePhoto(url) {
       return '<div class="span1" data-index="'+uiUpload.currentIndex()+'" data-name="'+uiUpload.currentName()+'"><div class="bui-upload-thumbnail"><img src="'+url+'" alt="" /><i class="icon-removefill"></i></div></div>'
   }
   // 选择图片文件
   $("#getSelect").on("click", function(argument) {
       bui.alert(uiUpload.data());
   })

   // 选择图片文件
   $facePhoto.on("click", ".icon-removefill", function(e) {
       var $item = $(this).parents(".span1");
       var index = $item.attr("data-index");
       // 删除对应的上传数据
       uiUpload.remove(index);
			 picList.splice(index, 1);
       // 删除dom显示
       $item.remove();
       e.stopPropagation();
   })

}

//获取工单详情
function getData(id){
	var userData = $api.getStorage('mine');
	api.showProgress({
			title:'加载中',
			modal:false
	});
	ajaxRequest('post', {
			apiCode: 'WORK_ORDER_HANDLE_DETAIL',
			userId: userData.userId,
			requestData: Number(id)
	}, function (ret, err) {
			api.hideProgress();
			if (ret.code == 200) {
				data = ret.result;
				var tpl = $('#tpl').html();
				var content = doT.template(tpl);
				$('#content').html(content(ret.result));
			} else {
				api.toast({
						msg: ret.message,
						location: 'middle'
				});
				return false;
			}
	});
}

function submit() {
	var params = {},len = [];
	//选中的值
	var radio = $("input[type='radio']");
	for (i=0; i<radio.length; i++) {
		if (radio[i].checked) {
			var val = $(radio[i]).val();
			var name = $(radio[i]).attr('name');
			params[name] = val;
			len.push(val);
		}
	}
	if(len.length != 9){
		api.toast({
				msg: '您还有机器信息未选择，请检查后再试！',
				location: 'middle'
		});
		return false;
	}
	//备注
	params.deviceRemark = $('#deviceRemark').val();
	params.purifierRemark = $('#purifierRemark').val();
	//工单ID
	params.id = orderId;

	var userData = $api.getStorage('mine');
	api.showProgress({
			title:'提交中',
			modal:false
	});
	ajaxRequest('post', {
			apiCode: 'WORK_ORDER_HANDLE',
			userId: userData.userId,
			requestData: {
				workOrderHandle: params,
				enclosures: picList
			}
	}, function (ret, err) {
			api.hideProgress();
			if (ret.code == 200) {
				api.sendEvent({
						name: 'solveChange'
				});
			} else {
				api.toast({
						msg: ret.message,
						location: 'middle'
				});
				return false;
			}
	});

}

</script>
</body>
</html>
